<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>轴承CMS</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__WX__/mui/css/mui.min.css" rel="stylesheet" />
		<link href="__WX__/css/iconfont.css" rel="stylesheet" />
	</head>
	<script src="__WX__/js/jquery.min.js"></script>
	<style>
		
		
		
		ul li{
			list-style: none;
			padding:0;
			margin:0;
			border:0;
		}
		.top{
			height:460px;
			background:url('__WX__/img/login_bj.jpg') no-repeat;
			background-size:100%;
			overflow: hidden;
		}
		.cont{
			width:325px;
			height:320px;
			background-color:#fff;
			margin:92px auto;
			border-radius: 12px;
			box-shadow: 0px 5px 5px 2px #888888;
			overflow: hidden;
			padding:20px;
		}
		.denglu{
			width:150px;height:50px;float:right;margin-right:35px;margin-top:0px;
			background:url('__WX__/img/btn_k.png') no-repeat;
			background-size:100%;
			overflow: hidden;
			text-align: center;
			line-height: 46px;
			color:#fff;
			font-size:16px;
			font-weight: bold;
		}
	</style>
	<body style="margin:0px;background-color:#fff;">
		<div class="mui-content" style="background-color:#fff;">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-icon-left-nav mui-pull-left" style="color:#ff5722" href="javascript:history.back(-1)"></a>
				<a class="mui-icon mui-icon-reply mui-pull-right"></a>
				<h1 class="mui-title">忘记密码</h1>
			</header>
			<div class="mui-content top">
				<div class="cont">
					<form id="data">
						<h2 style="margin-top:10px;">重置密码</h2>
						<p style="margin-left:3px;margin-top:15px;">设置新的登录密码</p>
					    <div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
					        <label style="width:20%;padding:0px;margin-top:11px;border-right:2px solid #999">账&nbsp;&nbsp;&nbsp;&nbsp;号</label>
					    	<input type="text" name="phone" placeholder="请输入手机号" style="width:43%;float:left;padding-left:6px;">
							<button type="button" data-loading-icon-position="right" class="mui-btn code" style="width:37%;height:40px;border:0px;border-left:1px solid #ccc;background-color:#ccc;color:#fff">发送验证码</button>
					    </div>
						<div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
							<label style="width:20%;padding:0px;margin-top:11px;border-right:2px solid #999">验证码</label>
							<input type="text" name="code" class="mui-input-clear " placeholder="请输入验证码" style="width:50%;float:left;padding-left:6px;">
							<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:15%;height:40px;border:0px;">
								<img src="__WX__/img/password.png" style="width:200%;">
							</button>
						</div>
					    <div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
					        <label style="width:27%;padding:0px;margin-top:11px;border-right:2px solid #999">登录密码</label>
					    	<input type="password" name="password" class="mui-input-clear " placeholder="请输入登录密码" style="width:55%;float:left;padding-left:6px;">
					    	<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:15%;height:40px;border:0px;">
					    		<img src="__WX__/img/password.png" style="width:200%;">
					    	</button>
					    </div>
						<div class="mui-input-row" style="border-bottom:1px solid #53caff;margin-top:10px;">
							<label style="width:27%;padding:0px;margin-top:11px;border-right:2px solid #999">确认密码</label>
							<input type="password" name="password_show" class="mui-input-clear " placeholder="请再次输入密码" style="width:55%;float:left;padding-left:6px;">
							<button type="button" data-loading-icon-position="right" class="mui-btn xuanze" style="width:15%;height:40px;border:0px;">
								<img src="__WX__/img/password.png" style="width:200%;">
							</button>
						</div>
					</form>
				</div>
			</div>
			
			<p style="color:#53caff;float:left;margin-left:50px;margin-top: 24px;" class="go">去登录？</p>
			<div class="denglu submit" style="margin-top: 10px;">确定</div>
			
			
			
			

			
		</div>
		<script src="__WX__/mui/js/mui.min.js"></script>
		<script>
            //修改发送按钮颜色
            $($("input[name=phone]")).bind('input onpropertychange',function(){
                if($(this).val() > 0){
                    $(".code").css('background','#20C1CC');return false;
                }else{
                    $(".code").css('background','#ccc');return false;
                }
            });

            //调用短信发送接口
            $(".code").click(function(){
                var phone = $("input[name=phone]").val();
                var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                if(myreg .test(phone)){
                    $.ajax({
                        url:'getUserInfo',
                        type:"post",
                        data:{phone:phone},
                        success:function(res){
                            if(res == 200){
                                mui.alert('验证码已发送，请稍后...')
                            }else{
                                mui.alert(res.msg)
                            }
                        }
                    });
                }else{
                    mui.alert( phone +"不是电话");
                    $("input[name=phone]").val(null);
                    return false;
                }
            });
		</script>
		<!--找回密码js start-->
		<script type="text/javascript">
            $(".submit").click(function(){
                $.ajax({
                    url:'{:url("Home/find_pass")}',
                    type:'post',
                    data:$('#data').serialize(),
                    success:function(data){
                        if(data==200){
                            mui.alert('恭喜找回密码');
                            setTimeout(function(){ window.location.href = history.back(-1); }, 2000);
                        }else{
                            mui.alert(data.msg);
                            return false;
                        }
                    }
                })
            });
            $(".go").click(function(){
                window.location.href = 'login';
            })
		</script>
		<script>
			//验证用户名
			$("input[name='username']").blur(function(){
					if($("input[name='username']").val()==""){
						mui.alert('请输入用户名');
						$("input[name='username']").focus();
						return false;
					}
	                $.ajax({
	                    url:'checkUserName',
	                    type:'post',
	                    data:{username:$('input[name=username]').val()},
	                    success:function(res){
							if(res.code == 500){
							 mui.alert(res.msg);
							 $("input[name='username']").val("").focus();
							}
	                    }
	                });
			});
		</script>
		<!--找回密码js end-->
	</body>
</html>